<template>
	<div class="home">
		<h2 class="text">往死里抽</h2>
		<div class="draw">
			<LuckyWheel
				ref="myLucky"
				width="300px"
				height="300px"
				:prizes="prizes"
				:blocks="blocks"
				:buttons="buttons"
				@start="startCallback"
				@end="endCallback"
			/>
		</div>
	</div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { Dialog, Toast } from 'vant';
import { useRouter } from 'vue-router';

const router = useRouter();
let myLucky = ref(null);
let blocks = reactive([{ padding: '13px', background: '#617df2' }]);
let prizes = reactive([
	{
		fonts: [
			{ text: '特等奖', top: '10%', fontColor: 'red', fontWeight: '700' },
		],
		background: '#e9e8fe',
	},
	{
		fonts: [
			{ text: '一等奖', top: '10%', fontColor: 'red', fontWeight: '700' },
		],
		background: '#b8c5f2',
	},
	{
		fonts: [
			{ text: '二等奖', top: '10%', fontColor: 'red', fontWeight: '700' },
		],
		background: '#e9e8fe',
	},
	{
		fonts: [
			{ text: '三等奖', top: '10%', fontColor: 'red', fontWeight: '700' },
		],
		background: '#b8c5f2',
	},
	{
		fonts: [
			{ text: '四等级', top: '10%', fontColor: 'red', fontWeight: '700' },
		],
		background: '#e9e8fe',
	},
	{
		fonts: [
			{ text: '五等奖', top: '10%', fontColor: 'red', fontWeight: '700' },
		],
		background: '#b8c5f2',
	},
]);
let buttons = reactive([
	{ radius: '50px', background: '#617df2' },
	{ radius: '45px', background: '#afc8ff' },
	{
		radius: '40px',
		background: '#869cfa',
		pointer: true,
		fonts: [{ text: '开始\n抽奖', top: '-20px' }],
	},
]);

// 点击抽奖按钮会触发star回调
const startCallback = () => {
	// 调用抽奖组件的play方法开始游戏
	myLucky.value.play();
	// 模拟调用接口异步抽奖
	setTimeout(() => {
		// 假设后端返回的中奖索引是0
		const index = 0;
		// 调用stop停止旋转并传递中奖索引
		myLucky.value.stop(index);
	}, 5000);
};

onMounted(() => {
	if (localStorage.getItem('recordList')) {
		router.push('/money');
	}
});

// 抽奖结束会触发end回调
const endCallback = prize => {
	console.log(prize);
	Dialog.alert({
		message: '恭喜你，获得特等奖800元现金红包！',
		theme: 'round-button',
	}).then(() => {
		// on close
		router.push('/money');
		localStorage.setItem('recordList', JSON.stringify([]));
	});
};
</script>

<style lang="scss" scoped>
.home {
	width: 100%;
	height: 100vh;
	position: relative;
	.text {
		position: absolute;
		top: 30px;
		left: 50%;
		transform: translateX(-50%);
		color: red;
	}
	.draw {
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
	}
}
</style>
